<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>融资服务</title>
</head>
<style>
    * {

        margin: 0 auto;
    }
	body{
		position: relative;
	}

    nav {
        text-align: center;
        width: 100%;
        background: #fff;
		position: fixed;
		top:0px;
		left: 0;
		z-index: 1;
		padding-top: 20px;
    }

    nav>ul {
        padding: 0;
        margin-bottom: 0px;
        height: 2.1rem;
        width: 100%;
		display: flex;
		justify-content: space-around;
    }

    nav>ul>li {
        font-size: 1rem;
        width: 20%;
        font-weight: bold;
        list-style-type: none;
        float: left;
        height: 2.1rem;
    }

    li:hover{
        font-weight: bold;
        background-image: linear-gradient(to right, #1884cf, rgb(186, 214, 236));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-bottom: solid 3px #6bb6e8;
    }
    .act{
        font-weight: bold;
        background-image: linear-gradient(to right, #1884cf, rgb(186, 214, 236));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-bottom: solid 3px #6bb6e8;
    }
    #container {
        background: #f5f8fc;
        height: auto;
        width: 100%;
		margin-top: 50px;
    }

    section {
        height: auto;
        width: 96% !important;
        padding-top: 10px;
    }

    .zong {
        width: 95%;
        height: 205px;
        /* margin-top: 5px; */
    }

    .zong>.tu {
        width: 100%;
        height: 170px;
       box-shadow: 5px 10px 10px#e4e6ea;
        border-radius: 10px;
		overflow: hidden;
       
    }

    .zong>.tu>a>img {
        margin: 0 auto;
        width: 100%;
        height: auto
    }

    .zong>h2 {
        padding-top: 0.8rem;
        font-size: 0.9rem;
        font-weight: bold;
    }
	.nodata{
		font-size: 0.9rem;
		line-height: 2rem;
		font-weight: bold;
		text-align: center;
	}
</style>
</head>

<body>
    <!--导航栏部分HTML代码-->
    <nav id="nav">
        <ul>
            <!-- <li class="act">海外融资</li>
            <li>融资租金</li>
            <li>银行贷款</li>
            <li>债券融资</li>
            <li>股票筹资</li> -->
        </ul>
    </nav>
    <!--内容部分HTML代码-->
    <div id="container">
        <section class="tab">
            <!-- <div class="zong">
                <div class="tu">
                    <a href="https://ai.taobao.com/?pid=mm_116823695_14630338_681516782">
                        <img src="./img/img26.png">
                    </a>
                </div>
                <h2>千元好课 | 限时免费开放</h2>
            </div> -->
        </section>
       
	</div>
</body>
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
	//var baseUrl = 'http://mhcf.mycfxt.com/';
    var baseUrl = 'http://hz.mhcfw.com/';
	var curpage = 1;
	var pagesize = 20;
	var oneLoad = true;
	var nodata= false;
	$(function(){
		getCategory();
		// 分类切换
		$('#nav ul').on('click','li',function(event){
			event.preventDefault();
			$(this).addClass('act').siblings().removeClass('act');
			var classid = $(this).attr('data-id');
			getList(classid,1,pagesize)
			sessionStorage['classid']=classid;
		});
		//	跳转新闻详情页
		$('.tab ').on('click','.zong',function(event){
			event.preventDefault();
			var infoid = $(this).attr('data-id');
			location.href='newsdetail.html?infoid='+infoid;
		});
	});
	
	window.onscroll = function () {
		if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
			//ajax从这里开始
			curpage = curpage+1
			var classid = sessionStorage['classid'];
			if(nodata==false){
				loadMore(classid,curpage,pagesize)
			}
		}
	}
	 //获取滚动条当前的位置 
	function getScrollTop() { 
		var scrollTop = 0; 
		if (document.documentElement && document.documentElement.scrollTop) { 
			scrollTop = document.documentElement.scrollTop; 
		} 
		else if (document.body) { 
			scrollTop = document.body.scrollTop; 
		} 
		return scrollTop; 
	} 
	
	    //获取当前可视范围的高度 
	function getClientHeight() { 
	    var clientHeight = 0; 
	    if (document.body.clientHeight && document.documentElement.clientHeight) { 
			clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
	    } 
	    else { 
			clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
	    } 
	    return clientHeight; 
	} 
	
	    //获取文档完整的高度 
	function getScrollHeight() { 
	    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
	} 

	//获取分类
	function getCategory() {
		$.ajax({
			type: "post",
			url: baseUrl+"API/getvclist.ashx",
			data: {
				infover: 9007
			},
			dataType: "json",
			success: function(data){
				var html = '';
				if(data.status== 0){
					if(data.data.length==0){
						html+=`
							<div class="nodata">暂无相关数据</div>
						`;
						$('#nav').append(html);
					}else{
						$.each(data.data, function(i,d){
							html += `
								<li data-id="${d.classid}">${d.classname}</li>
							`;
					   })
						$('#nav ul').append(html);	
						if(oneLoad){
							oneShow()
							oneLoad = false
						}
						
					}
		
				}else{
					html+=`
						<div class="nodata">暂无相关数据</div>
					`;
					$('#nav').append(html);
				}
			}
		});
	}
	
	//根据分类获取列表
	function getList(id,curpage,pagesize) {
		$.ajax({
			type: "post",
			url: baseUrl+"API/getfinlist.ashx",
			data: {
				classid: id,
				curpage: curpage,
				pagesize: pagesize
			},
			dataType: "json",
			success: function(data){
				var html = '';
				if(data.status == 0){
					if(data.data.length==0){
						html+=`
							<div class="nodata">------我是有底线的------</div>
						`;
						$('#container .tab').html(html);	
						nodata = true;
					}else{
						$.each(data.data, function(i,d){
							html += `
								<div class="zong"  data-id="${d.infoid}" >
								    <div class="tu">
								        <a href="javascript:;">
								            <img src="${baseUrl}${d.imgurl}">
								        </a>
								    </div>
								    <h2>${d.title}</h2>
								</div>
							`;
					   })
						$('#container .tab').html(html);	
					}
		
				}else{
					html+=`
						<div class="nodata">暂无相关数据</div>
					`;
					$('#container .tab').html(html);	
				}
			}
		});
	}
	
	function loadMore(id,curpage,pagesize) {
		$.ajax({
			type: "post",
			url: baseUrl+"API/getfinlist.ashx",
			data: {
				classid: id,
				curpage: curpage,
				pagesize: pagesize
			},
			dataType: "json",
			success: function(data){
				var html = '';
				if(data.status == 0){
					if(data.data.length==0){
						html+=`
							<div class="nodata">------我是有底线的------</div>
						`;
						$('#container .tab').append(html);	
						nodata = true;
					}else{
						$.each(data.data, function(i,d){
							html += `
								<div class="zong"  data-id="${d.infoid}" >
								    <div class="tu">
								        <a href="javascript:;">
								            <img src="${baseUrl}${d.imgurl}">
								        </a>
								    </div>
								    <h2>${d.title}</h2>
								</div>
							`;
					   })
						$('#container .tab').append(html);	
					}
		
				}else{
					html+=`
						<div class="nodata">暂无相关数据</div>
					`;
					$('#container .tab').append(html);	
				}
			}
		});
	}
	
	function oneShow() {
		var first = $("#nav ul li").eq(0);
		first.addClass('act');
		var classid = first.attr('data-id');
		sessionStorage['classid']=classid;
		getList(classid,curpage,pagesize)
	}
	
</script>
